<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>进阶：8、过渡效果 动态过渡</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
</head>
<body>
	<!-- 
		两个输入其实就是过渡的毫秒数，出现过渡和隐藏过渡 
		通过show这个状态量来控制显示和隐藏，切换的时候会触发过渡周期钩子
		所以在钩子函数内变化show这个状态量就会触发新一轮的过渡，引发别的钩子
		所以页面显示效果上hello不断地显示和隐藏
	-->
	<div id="dynamic-fade-demo">
	  Fade In: <input type="range" v-model="fadeInDuration" min="0" v-bind:max="maxFadeDuration">
	  Fade Out: <input type="range" v-model="fadeOutDuration" min="0" v-bind:max="maxFadeDuration">
	  <transition
	    v-bind:css="false"
	    v-on:before-enter="beforeEnter"
	    v-on:enter="enter"
	    v-on:leave="leave"
	  >
	    <p v-if="show">hello</p>
	  </transition>
	  <button v-on:click="stop = true">Stop it!</button>
	</div>	

	<script type="text/javascript">
		// 过渡的出现让应用中进行切换和做各种操作时能渲染各种炫酷的效果了，真是牛逼
		new Vue({
		  el: '#dynamic-fade-demo',
		  data: {
		    show: true,
		    fadeInDuration: 1000,
		    fadeOutDuration: 1000,
		    maxFadeDuration: 1500,
		    stop: false
		  },
		  mounted: function () {
		    this.show = false
		  },
		  methods: {
		    beforeEnter: function (el) {
		      el.style.opacity = 0
		    },
		    enter: function (el, done) {
		      var vm = this
		      Velocity(el,
		        { opacity: 1 },
		        {
		          duration: this.fadeInDuration,
		          complete: function () {
		            done()
		            if (!vm.stop) vm.show = false
		          }
		        }
		      )
		    },
		    leave: function (el, done) {
		      var vm = this
		      Velocity(el,
		        { opacity: 0 },
		        {
		          duration: this.fadeOutDuration,
		          complete: function () {
		            done()
		            vm.show = true
		          }
		        }
		      )
		    }
		  }
		})		
	</script>
</body>
</html>